import React, { useState } from "react";
import { Input, Form, Button, InputNumber, Cascader, Select } from 'antd'
import axios from "axios";
import { useDispatch } from "react-redux";
import { useNavigate } from 'react-router-dom'

import request from "../../../utils/request";
import store from "../../../store";
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 10,
    },
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
    required: '${label} is required!',
    types: {

        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};
function Adduser() {
    const navtigate = useNavigate()
    const [tags, setTages] = useState('')
    const handleChange = (value) => {
        // console.log(`selected ${value}`);
        // console.log(value);
        setTages(value)
    };
    const onFinish = async (values) => {
        console.log('values', values);
        let ntags = tags || []
        let newTages = ntags.join(' ')


        let addState = await request({
            url: '/user/add',
            method: 'post',
            // headers: {

            // },
            data: { ...values.user, tags: newTages }

        })
        // console.log(addState.data);
        if (addState.data.code === 200) {
            // console.log(1);
            navtigate('/manage/home/user/userlist')

        }
        // let a = dispatch({ type: 'adduser', payload: { user: values.user } })
    };

    const children = []
    return (
        <div>
            <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                <Form.Item
                    name={['user', 'username']}
                    label="名字"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name={['user', 'password']}
                    label="密码"
                    rules={[
                        {
                            required: true,

                        },
                    ]}
                >
                    <Input type="password" />
                </Form.Item>

                <Form.Item
                    name={['user', 'age']}
                    label="年纪"
                    rules={[
                        {
                            required: true,
                            type: 'number',
                            min: 0,
                            max: 99,
                        },
                    ]}
                >
                    <InputNumber />
                </Form.Item>
                <Form.Item
                    name={['user', 'address']}
                    label="地址"
                    rules={[
                        {
                            required: true,

                        },
                    ]}
                >

                    <Input />
                </Form.Item>


                <Form.Item
                    name={['user', 'tags']}
                    label="tags"
                >

                    <Select
                        mode="tags"
                        style={{
                            width: '100%',
                        }}
                        onChange={handleChange}
                        tokenSeparators={[' ']}
                    >
                        {children}
                    </Select>
                </Form.Item>
                <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                    <Button type="primary" htmlType="submit">
                        添加
                    </Button>
                </Form.Item>
            </Form>

        </div>
    )
}

export default Adduser